<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>弹幕</title>
    <link href="../../css/mui.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/app.css" />
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        height: auto;
        width: 100%;
        margin: 0 auto;
        border: 1px solid #000000;
        position: relative;
    }

    #main {
        width: 100%;
        height: 300px;
        position: relative;
        overflow: hidden;
    }

    p {
        position: absolute;
        left: 100%;
        width: 200px;
        top: 0;
    }

    #bottom {
        width: 100%;
        height: 80px;
        background: #ABCDEF;
        text-align: center;
        padding-top: 15px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    #txt {
        width: 80%;
        height: 50px;
        float: left;
    }

    #btn {
        float: left;
        width: 20%;
        height: 50px;
    }
    </style>
</head>

<body>
    <div id="box">
        <div id="main">
        </div>
        <div id="bottom">
            <input type="text" id="txt" placeholder="请输入内容" />
            <input type="button" id="btn" value="发射" />
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
    $(function() {
        var pageH = parseInt($("#main").height());
        var colorArr = ["#cfaf12", "#12af01", "#981234", "#adefsa", "#db6be4", "#f5264c", "#d34a74"];
        $("#btn").bind("click", auto);
        document.onkeydown = function(e) {
            if (e.keyCode == 13) {
                auto();
            }
        };

        function auto() {
            var $value = $("#txt").val();
            $("#main").append("<p>" + $value + "</p>");
            $("#txt").val("");
            var _top = parseInt(pageH * (Math.random()));
            //                  0~6 ;
            var num = parseInt(colorArr.length * (Math.random()));
            $("p:last-child").css({ "top": _top, "color": colorArr[num], "font-size": "20px" });
            $("p:last-child").animate({ "left": "-200px" }, 10000);
            //                  结束当前这个
            $("p:last-child").stop().animate({ "left": "-300px" }, 10000, "linear", function() {
                $(this).remove();
            });
        };

    })
    </script>
</body>

</html>